import React, { useState } from 'react';
import { Card, Radio } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { eventTrack } from '@/utils/track';
// import { GuideByServerFlag } from '@/components';
import { TopOrgInfo, OrgListTable } from './components';
import OrgTree from './OrgTree';
import styles from './index.less';

const OrgList = ({ location }) => {
    const [viewType, setViewType] = useState(location.query?.type ? location.query.type : 'listView');

    const onViewChange = e => {
        if (e.target.value === 'listView') {
            eventTrack({
                eventName: 'personnel_management_organization_orgflow_list_view_click',
                pageName: 'personnel_management_organization'
            });
        } else if (e.target.value === 'treeView') {
            eventTrack({
                eventName: 'personnel_management_organization_orgflow_graph_view_click',
                pageName: 'personnel_management_organization'
            });
        }
        setViewType(e.target.value);
    };
    React.useEffect(() => {
        eventTrack({
            eventName: 'personnel_management_organization_orgflow_click',
            pageName: 'personnel_management_organization'
        });
    }, []);
    return (
        <PageHeaderWrapper>
            {/* <GuideByServerFlag serverStorageKey="guideOrgFlow"> */}
            <TopOrgInfo />

            <div className={styles.block}>
                <div className={styles.radioPosition}>
                    <Radio.Group onChange={onViewChange} defaultValue={viewType}>
                        <Radio.Button value="listView">
                            <i
                                className="iconfont iconswitch_listview_icon_default"
                                style={{
                                    marginRight: '5px',
                                    fontSize: 22,
                                    display: 'inline-block',
                                    verticalAlign: 'bottom'
                                }}
                            />
                            列表视图
                        </Radio.Button>
                        <Radio.Button value="treeView">
                            <i
                                className="iconfont iconswitch_guideview_icon_default"
                                style={{
                                    marginRight: '5px',
                                    fontSize: 22,
                                    display: 'inline-block',
                                    verticalAlign: 'bottom'
                                }}
                            />
                            图形视图
                        </Radio.Button>
                    </Radio.Group>
                </div>
                <Card bordered={false} bodyStyle={{ padding: '0 16px 16px 16px' }}>
                    {viewType === 'listView' && <OrgListTable location={location} />}
                    {viewType === 'treeView' && (
                        <OrgTree
                            control
                            showViewModeSwitch
                            type="organization"
                            orgTreeId={`organizationManagement_${Math.floor(Math.random() * 1000000)}`}
                        />
                    )}
                </Card>
            </div>
            {/* </GuideByServerFlag> */}
        </PageHeaderWrapper>
    );
};

export default OrgList;
